<template>
  <el-footer height="25px" class="footer">
    <div class="left">
      <span class="blog-link" @click="toBlog">安诺博客</span>
    </div>
    <div class="center">
      <span>MAC: {{ Object.values(MAC).join(' - ') }}</span>
      <span>IP: {{ ip }}</span>
    </div>
    <div class="right">
      <span class="version" @click="checkUpdate">
        v{{ appConfig.version }}
        <span ref="checkUpdate">
          <img src="@/assets/svg/check-update.svg" alt="" />
        </span>
      </span>
    </div>
  </el-footer>
</template>
<script>
import appConfig from '../../../../package.json'
import config from '@/config/config'
import os from 'os'
export default {
  name: 'footer-bar',
  data() {
    return {
      appConfig,
      config,
      MAC: {},
      ip: ''
    }
  },
  created() {
    this.getMAC()
  },
  methods: {
    /**
     * 获取本机的MAC和IP
     */
    getMAC() {
      this.MAC.name = os.hostname()
      if (os.networkInterfaces().WLAN) {
        this.MAC.mac = os.networkInterfaces().WLAN[0].mac
      } else {
        this.MAC.mac = os.networkInterfaces()['以太网'][0].mac
      }
      this.ip = os.networkInterfaces().WLAN[1].address
    },
    /**
     * 前往博客
     */
    toBlog() {
      this.$ele.shell.openExternal(config.blogUrl)
    },
    /**
     * 版本检测
     */
    checkUpdate() {
      this.$refs.checkUpdate.className = 'check-update'

      this.$utils.debounce(() => {
        this.msgInfo('有新版本')
        this.$refs.checkUpdate.className = ''
      }, 5000)()
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-color) !important;
  font-size: 14px;
  .left {
    display: inherit;
    align-items: inherit;
    cursor: pointer;
    line-height: 1;
    .blog-link {
      color: inherit;
      text-decoration: underline;
      margin-right: 10px;
    }
  }
  .right {
    height: 100%;
    display: inherit;
    align-items: inherit;
    .version {
      height: 100%;
      display: inherit;
      gap: 3px;
      align-items: inherit;
      cursor: pointer;
      span {
        height: inherit;
        padding: 4px;
        img {
          height: inherit;
        }
      }
    }
  }
}

.check-update {
  animation: 1s check-update infinite linear;
}
@keyframes check-update {
  to {
    transform-origin: center;
    transform: rotate(360deg);
  }
}
</style>
